<template>
    <div class="index">
        <div class="top d_f a_i_c j_c_s_b">
            <div class="d_f a_i_c">
                <img src="../assets/muLogo.png" alt="" class="logo">
                <div v-for="(item, index) in tabs" :key="index" class="d_f a_i_c margin"
                    @click="tabChange(item, index)">
                    <img :src="item.activeIcon" alt="" v-if="item.tab == active" class="tabIcon">
                    <img :src="item.icon" alt="" v-else class="tabIcon">
                    <span class="tabName">{{ item.name }}</span>
                </div>
            </div>
            <div class="d_f a_i_c">
                <el-tooltip class="box-item" effect="dark" :content="user.userVO.companyName+'欢迎您！'" placement="bottom-start">
                    <span class="company">{{ user.userVO.companyName }}<span
                            v-if="user.userVO.companyName">，</span>欢迎您！</span>
                </el-tooltip>
                <el-badge :value="unReadNum" class="item">
                    <img src="../assets/notice.png" alt="" class="notice c_p" @click="openMsg">
                </el-badge>
                <el-dropdown @command="handleCommand">
                    <div class="d_f a_i_c">
                        <img :src="user.userVO.img" alt="" class="user" v-if="user.userVO.img">
                        <img src="../assets/background.png" alt="" class="user" v-else>
                        <span class="username">{{ user.userVO.name }}</span>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="1">个人中心</el-dropdown-item>
                            <el-dropdown-item command="2">首页</el-dropdown-item>
                            <el-dropdown-item command="3">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </div>
        </div>
        <div class="bottom d_f">
            <div class="left d_f f_d_c a_i_c">
                <div class="d_f a_i_c m_t_5">
                    <img :src="tabItem.icon" alt="" class="icon">
                    <span class="size m_l_5">{{ tabItem.name }}</span>
                </div>
                <el-menu :show-timeout="50" :collapse="false" :hide-timeout="50" :default-active="url"
                    :unique-opened="false" class="el-menu-vertical-demo" @select="handSelect">
                    <Menu :menu="menu"></Menu>
                </el-menu>
            </div>
            <div class="right">
                <div class="tag d_f">
                    <el-tag v-for="(tag, index) in tagView" :key="tag.path"
                        :type="url == tag.path ? 'success' : 'primary'" size="default" @click="clcik(tag)"
                        :class="index > 0 ? 'm_l_5' : ''" class=" c_p m_t_10 " closable
                        @close="closeSelectedTag(tag, index)">
                        {{ tag.title }}
                    </el-tag>
                </div>
                <div class="padding">
                    <router-view />
                </div>
            </div>
        </div>
        <!-- 消息通知弹窗-->
        <el-drawer v-model="drawer" title="消息通知" size='700' direction="rtl" :before-close="handleClose">
            <div class="d_f a_i_c j_c_s_b">
                <div class="d_f a_i_c">
                    <div class="color" :class="values.allNum == '0' ? 'msgActive' : ''" @click="queryMsg('0')">未读({{
                        unReadNum
                    }})</div>
                    <div class="m_l_15 color" :class="values.allNum == '1' ? 'msgActive' : ''" @click="queryMsg('1')">
                        已读({{
                            readNum }})</div>
                    <div class="m_l_15 color" :class="values.allNum == '' ? 'msgActive' : ''" @click="queryMsg('')">
                        全部消息({{
                            allNum }})</div>
                </div>
                <el-select v-model="values.serviceType" clearable placeholder="请选择通知类别" @change="queryMsg('2')">
                    <el-option v-for="item in serviceType" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </div>
            <div class="line m_t_10"></div>
            <div v-loading="loading" class="m_t_20" style="height: calc( 100% - 70px);">
                <div v-if="records.length > 0" class="w_h_100">
                    <div class="auto">
                        <div v-for="(item, index) in records" :key="index" class="m_t_20">
                            <div class="d_f">
                                <div v-if="item.isRead == 0" class="noRead_status">
                                    <img src="../assets/noRead.png" alt="" class="normal_img">
                                    未读
                                </div>
                                <div v-if="item.isRead == 1" class="normal_status">
                                    <img src="../assets/normal.png" alt="" class="normal_img">
                                    已读
                                </div>
                                <div class="m_l_15"> {{ item.title }}</div>
                            </div>
                            <div class="d_f j_c_s_b m_t_10">
                                <div class="wid" v-if="item.projectNo">项目编号：{{ item.projectNo || '-' }}</div>
                                <div class="wid" v-if="item.createdTime">通知时间：{{ item.createdTime || '-' }}</div>
                            </div>
                            <div class="d_f j_c_s_b m_t_10">
                                <div class="wid" v-if="item.customerName">客户名称：{{ item.customerName || '-' }}</div>
                                <div class="wid" v-if="item.batchNo">批次编号：{{ item.batchNo || '-' }}</div>
                            </div>
                            <div class="content d_f m_t_16">
                                <div>内容：</div>
                                <div class="text">{{ item.content }}</div>
                            </div>
                            <div class="d_f j_c_s_b m_t_16">
                                <div></div>
                                <div>
                                    <el-button @click="deleteOut(item)">删除</el-button>
                                    <el-button type="primary" @click="lookUp(item)">{{ item.linkType == 0 ? '已读' : '查看'
                                        }}</el-button>
                                </div>
                            </div>
                            <div class="line m_t_16" v-if="index < records.length - 1"></div>
                        </div>
                    </div>
                    <div class="d_f j_c_c m_t_20">
                        <el-pagination v-model:current-page="values.pageNum" v-model:page-size="values.pageSize"
                            :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"
                            :total="total" @change="handleCurrentChange" />
                    </div>
                    <div class="line m_t_16"></div>
                    <div class="m_t_20">
                        <el-button @click="clearMsgList">清空消息列表</el-button>
                        <el-button @click="readAllMessages">一键已读全部消息</el-button>
                    </div>
                </div>
                <div class="center d_f f_d_c a_i_c" v-else>
                    <img src="../assets/blank.png" class="image" />
                    <p>暂时还没有内容呢...</p>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, toRefs, onBeforeMount, watch } from 'vue'
import Menu from '../components/menu.vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { Message } from '../utils/resetMessage'
import { useStore } from '../store/index'
import { mineMsg, msgReadNum, msgClear, msgReadAll, msgDel, readSingle, authLogout } from '../api/login'
import { dictDetail } from '../api/login'
function recursion(item: any, url: any) {
    if (item.children) {
        recursion(item.children[0], url)
    } else {
        url.push(item.idxUri)
    }

    return url
}

export default defineComponent({
    components: {
        Menu
    },
    name: '',
    setup() {

        const store = useStore();
        const active = computed(() => store.$state.active);
        const tabs = computed(() => store.$state.tabs);
        const menu = computed(() => store.$state.menu);
        const tabItem = computed(() => store.$state.tabItem);
        const url = computed(() => store.$state.url);
        const user = computed(() => store.$state.user);
        const tagView = computed(() => store.$state.tagView);
        const data = reactive({
            drawer: false,
            userVO: {
                name: '',
            },
            icon: '',
            name: '',
            values: {
                pageNum: 1,
                pageSize: 10,
                allNum: '0',
                serviceType: '',
            },
            total: 0,
            unReadNum: 0,
            readNum: 0,
            allNum: 0,
            records: [],
            loading: false,
            collapse: true,
            serviceType: [],
        })
        const { path } = useRoute();
        const router = useRouter()
        onBeforeRouteUpdate((to, from) => {

        });
        onBeforeMount(() => {

        })
        const methods = {
            //点击菜单跳转界面
            handSelect(e: string) {
                store.updateUrl(e)
                router.push(e)
            },
            //点击tabs切换菜单
            tabChange(e: any, index: number) {
                let url: any = []
                url = recursion(e.children[0], url)
                router.push(url[0])
                store.updateActive({ item: e, url: url[0] })
            },
            handleCommand(command: string | number | object) {
                switch (command) {
                    case '1':
                        router.push('/personal/index')
                        break;
                    case '2':
                        router.push('/system/dictionary/index')
                        break;
                    case '3':
                    authLogout({}).then(res=>{
                        router.push('/')
                    })
                        
                        break;
                        ;
                }
            },
            openMsg() {
                dictDetail({ id: 'NOTICE_TYPE' }).then((res: any) => {
                    data.serviceType = res
                })
                mineMsg(data.values).then((res: any) => {
                    data.drawer = true
                    data.records = res.records
                    data.total = res.total
                })
            },
            queryMsg(num: string) {
                if (num != '2') {
                    data.values.allNum = num
                }
                mineMsg(data.values).then((res: any) => {
                    data.records = res.records
                    data.total = res.total
                })
                methods.getMessageData()
            },
            handleCurrentChange(currentPage: number, pageSize: number) {
                data.values.pageNum = currentPage;
                if (pageSize) {
                    data.values.pageSize = pageSize;
                }
                methods.queryMsg('2')
            },
            handleClose() {
                data.drawer = false
            },
            //选择菜单进行页面跳转
            clcik(tag: any) {
                router.push({ path: tag.path, query: tag.query })
            },
            getMessageData() {
                msgReadNum({}).then((res: any) => {
                    data.unReadNum = res.unReadNum
                    data.allNum = res.allNum
                    data.readNum = res.readNum
                })
            },
            closeSelectedTag(tag: any, index: number) {
                store.deleteTag({ tag: tag, index: index })
            },
            //一键清空消息列表
            clearMsgList() {
                msgClear({}).then(() => {
                    Message({ type: 'success', message: '清空成功' })
                    methods.getMessageData()
                    methods.queryMsg('2')
                })
            },
            //已读全部消息
            readAllMessages() {
                msgReadAll({}).then(() => {
                    Message({ type: 'success', message: '操作成功' })
                    methods.getMessageData()
                    methods.queryMsg('2')
                })
            },
            //删除单条信息
            deleteOut(item: any) {
                msgDel({ id: item.id }).then(() => {
                    Message({ type: 'success', message: '删除成功' })
                    methods.getMessageData()
                    methods.queryMsg('2')
                })
            },
            //查看消息详情
            lookUp(item: any) {
                readSingle({ id: item.id }).then(() => {
                    methods.getMessageData()
                    methods.queryMsg('2')
                })
                if (item.linkType == 0) return
                if (item.linkType == 1) {
                    switch (item.productCategory) {
                        case 1:
                            if (item.nodeCategory == 1) {
                                router.push('/service/singleFinancing/front')
                                data.drawer = false
                            } else {
                                router.push('/service/singleFinancing/behind')
                                data.drawer = false
                            }
                            break;
                        case 2:
                            if (item.nodeCategory == 1) {
                                router.push('/service/financingBatch/front')
                                data.drawer = false
                            } else {
                                router.push('/service/financingBatch/behind')
                                data.drawer = false
                            }
                            break;
                        case 3:
                            router.push('/service/noFinancingSingle/front')
                            data.drawer = false
                            break;
                        case 4:
                            router.push('/service/noFinancingBatch/front')
                            data.drawer = false
                            break;
                            ;
                    }

                } else if (item.linkType == 2) {
                    switch (item.productCategory) {
                        case 1:
                            if (item.nodeCategory == 1) {
                                router.push('/agent/singleFinancing/front')
                                data.drawer = false
                            } else {
                                router.push('/agent/singleFinancing/behind')
                                data.drawer = false
                            }
                            break;
                        case 2:
                            if (item.nodeCategory == 1) {
                                router.push('/agent/financingBatch/front')
                                data.drawer = false
                            } else {
                                router.push('/agent/financingBatch/behind')
                                data.drawer = false
                            }
                            break;
                        case 3:
                            router.push('/agent/noFinancingSingle/front')
                            data.drawer = false
                            break;
                        case 4:
                            router.push('/agent/noFinancingBatch/front')
                            data.drawer = false
                            break;
                            ;
                    }
                }

            }
        }

        // 判断路由，控制当前导航标签
        let route = useRoute()
        watch(() => route.path, (newValue) => {
            store.updateUrl(newValue)
            methods.getMessageData()
        }, { immediate: true })
        return {
            ...toRefs(data),
            active,
            tabs,
            menu,
            user,
            tabItem,
            url, tagView, ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.index {
    width: 100%;
    height: 100%;

    .top {
        height: 56px;
        width: calc(100% - 72px);
        background: #242424;
        padding: 0px 36px;

        .logo {
            width: 247px;
            background-size: 100% 100%;
        }

        .company {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            width: 17vw;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .notice {
            width: 24px;
            height: 24px;
            background-size: 100% 100%;
            margin-left: 24px;
        }

        .user {
            width: 32px;
            border-radius: 50%;
            height: 32px;
            background-size: 100% 100%;
            margin-left: 24px;
            object-fit: cover;
        }

        .username {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            margin-left: 8px;
        }

        .margin {
            margin-left: 36px;
            cursor: pointer;
        }

        .tabIcon {
            width: 26px;
        }

        .tabName {
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            margin-left: 6px;
        }
    }

    .bottom {
        height: calc(100% - 56px);
        width: 100%;
    }

    .left {
        height: 100%;
        width: 190px;
        min-width: 100px;
        padding: 0px 16px;
        background: #242424;
        overflow-y: auto;
        overflow-x: hidden;

        .icon {
            width: 26px;
        }

        .size {
            font-size: 15px;
            color: #fff;
        }

        .el-menu-vertical-demo {
            width: 100%;
        }
    }

    .right {
        width: calc(100% - 222px);
        height: 100%;
        background: #F3F3F3;

        .padding {
            height: calc(100% - 60px);
            margin-top: 10px;
            margin-left: 0.8vw;
            width: calc(100% - 1.6vw);
        }

        .tag {
            margin-left: 0.8vw;
            width: calc(100% - 40px);
            overflow-x: auto;
        }
    }

    .msgActive {
        padding: 4px 15px;
        background: #F2F3F5;
        border-radius: 100px;
        color: #1878FF !important;
    }

    .color {
        color: #767676;
        cursor: pointer;
    }

    .line {
        width: 100%;
        height: 1px;
        background: #E7E7E7;
    }

    .auto {
        width: 100%;
        height: calc(100% - 120px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .image {
        height: 150px;
    }

    .center {
        width: 100%;
    }

    .wid {
        width: 50%;
        color: #767676;
        font-size: 13px;
    }

    .content {
        background: #F2F3F5;
        width: 100%;
        padding: 8px;
        border-radius: 2px;
        color: #1A1A1A;
        font-size: 14px;

        .text {
            width: calc(100% - 50px);
        }
    }
}
</style>